@extends('master')
@section('title')
<title>密码修改</title>
@endsection
@section('style')
<style>
body{background: #eee;}
#content{margin-top: 150px;}
hr{margin: 0px;}
</style>
@endsection
@section('content')
<div id="content" class="container">
	<div class="col-md-12">
		<div id="input-content" class="col-md-6 col-md-offset-3 text-left" style="background: white;border-radius: 10px;">
			@if($user->email || $user->phone)
				<form id="check">
					<label>
						<select class="form-control" name="method" id="">
							<option value="">请选择验证方式: </option>
							@if($user->email) <option value="email">邮箱验证</option> @endif
							@if($user->phone) <option value="phone">手机验证</option> @endif
						</select>
					</label>
					<hr>
					<div id="checkInput">
						<div class="emailCheck" style="display: none;">
							<label>您的邮箱是:</label>{{$user->email}}
							<input type="hidden" name="email" value="{{$user->email}}">
							<span class="btn btn-info getEmailCode">点击获取验证码</span>
							<hr>
							<label style="margin-top: 30px;">
							请输入验证码:
							<input class="form-control" type="text" name="code">
							<span class="btn submit">提交</span>
							</label>
						</div>
						<div class="phoneCheck" style="display: none;">
							<label>您的手机号是:</label>{{$user->phone}}
							<input type="hidden" name="phone" value="{{$user->phone}}">
							<span class="btn btn-info getPhoneCode">点击获取验证码</span>
							<hr>
							<label style="margin-top: 30px;">
							请输入验证码:
							<input class="form-control" type="text" name="code">
							<span class="btn submit">提交</span>
							</label>
						</div>
					</div>
				</form>
			@else
			<form action="/submit" method="post">
				<label> 请输入旧密码:
					<input class="form-control" type="text" name="oldpassword">
				</label>
				<hr>
				<label> 请输入新密码:
					<input class="form-control" type="text" name="password">
				</label>
				<hr>
				<label> 请再次输入新密码:
					<input class="form-control" type="text" name="repassword">
				</label>
				<label>
					{{csrf_field()}}
					<span id="set_btn" class="btn btn-primary submit">修改</span>
				</label>
			</form>
			@endif
		</div>
		@if($user->email || $user->phone)
		<script>
			$(function(){
				var emailCode = '';
				var phoneCode = '';
				$('#check select[name=method]').change(function() {
					if($(this).val() == 'email'){
						$('.emailCheck').show();
						$('.phoneCheck').hide();
					}
					if($(this).val() == 'phone'){
						$('.emailCheck').hide();
						$('.phoneCheck').show();
					}
				});
				var isSend = false;
				$('.getEmailCode').click(function() {
					if(!isSend){
						isSend = true;
						var data = {
							email : $('.getEmailCode').prev('input[name=email]').val()
						};
						var gc = $(this);
						var num = 60;
						$.post('/api/sendEmail',data,function(res){
							emailCode = res.code;
						}, 'json');
						var i = setInterval(function(){
							num--;
							gc.html(num+'秒后可以重新发送');
							if(num == 0){
								num = 0;
								clearInterval(i);
								gc.html('重新发送')
								isSend = false;
							}
						}, 1000);
					}
				});
				$('.getPhoneCode').click(function() {
					if(!isSend){
						isSend = true;
						var data = {
							phone : $('.getPhoneCode').prev('input[name=phone]').val()
						};
						var gc = $(this);
						var num = 60;
						$.post('/api/sendPhone',data,function(res){
							phoneCode = res.code;
						}, 'json');
						var i = setInterval(function(){
							num--;
							gc.html(num+'秒后可以重新发送');
							if(num == 0){
								num = 0;
								clearInterval(i);
								gc.html('重新发送')
								isSend = false;
							}
						}, 1000);
					}
				});
				$('.submit').click(function() {
					var v = $(this).prev('input').val();
					if(v == emailCode || v == phoneCode){
						var form = '<form action="/submit" method="post"> {{csrf_field()}} <label> 请输入新密码: <input class="form-control" type="text" name="password"> </label> <hr> <label> 请再次输入新密码: <input class="form-control" type="text" name="password"> </label> <hr /> <label> <a href="/success" class="btn btn-primary">修改</a> </label> </form>';
						$('#input-content').html(form);
					}else{
						alert('验证码错误');
					}
				});
			});
		</script>
		@endif
	</div>
</div>
@endsection
@section('footer')
@endsection